<template>
  <transition name="slide-fade">
  <div class="My animated bounceInright">
    <div class="" :class="{ 'persional_back':true, 'notlogin': !$store.state.islogin}">
        <router-link class="setting pull_right iconfont" to="settings">&#xe670;</router-link>
        <div class="personal_info">
          <a href="javascript:void(0)" @click="jumpUrl">
          <div class="img_head" v-if="$store.state.islogin"><img :src="$store.state.userImg"></div>
          <div class="img_head" v-else><img src="../assets/utopia.png"></div>
          <div class="info_name" v-if="$store.state.islogin">{{$store.state.userName}} <span class="sex iconfont">&#xe632;</span></div>
          <div class="info_name" v-else>未登录 <span class="sex iconfont" v-show="$store.state.islogin">&#xe632;</span></div>
          <div class="motto" v-if="$store.state.islogin">我不甘心啊！！！</div>
          <div class="motto" v-else>点击头像登陆</div>
          <span class="more iconfont pull_right">&#xe6e9;</span>
          </a>
        </div>
    </div>
    <div class="info_records">
      <ul>
        <li>
          <router-link to="mynote">
          <p class="num">10</p>
          <p class="num">发帖</p>
        </router-link>
        </li>
        <li>
          <p>100+</p>
          <p>获赞</p>
        </li>
        <li>
          <p>0</p>
          <p>关注</p>
        </li>
        <li>
          <p>100+</p>
          <p>粉丝</p>
        </li>
      </ul>
    </div>
    <div class="otherinfo">
      <ul>
        <li>
          <router-link to="shent">
            <span class="iconfont">&#xe612;</span>神贴专区 <span class="iconfont pull_right">&#xe6e9;</span>
          </router-link>
        </li>
        <li>
          <router-link to="shent">
            <span class="iconfont">&#xe636;</span>我的帖子 <span class="iconfont pull_right">&#xe6e9;</span>
          </router-link>
        </li>
        <li>
          <router-link to="shent">
            <span class="iconfont">&#xe639;</span>我的评论 <span class="iconfont pull_right">&#xe6e9;</span>
          </router-link>
        </li>
        <li>
          <router-link to="shent">
            <span class="iconfont">&#xe619;</span>我的收藏 <span class="iconfont pull_right">&#xe6e9;</span>
          </router-link>
        </li>
        <li>
          <router-link to="shent">
            <span class="iconfont">&#xe66d;</span>我赞过的 <span class="iconfont pull_right">&#xe6e9;</span>
          </router-link>
        </li>
        <li>
          <router-link to="shent">
            <span class="iconfont">&#xe62f;</span>浏览历史 <span class="iconfont pull_right">&#xe6e9;</span>
          </router-link>
        </li>
        <li>
            <span class="iconfont">&#xe633;</span>夜间模式 <span class="iconfont pull_right"><mt-switch :value.sync="value"></mt-switch></span>
        </li>
        <li>
          <router-link to="shent">
            <span class="iconfont">&#xe64a;</span>推荐给好友 <span class="iconfont pull_right">&#xe6e9;</span>
          </router-link>
        </li>
        <li>
          <router-link to="shent">
            <span class="iconfont">&#xe692;</span>帮助反馈 <span class="iconfont pull_right">&#xe6e9;</span>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</transition>
</template>

<script>
import store from '@/vuex/store'
export default {
  name: 'My',
  data () {
    return {
      msg: 'My',
      value:true
    }
  },
  store,
  methods:{
    jumpUrl(){
      if(this.$store.state.islogin){
        this.$router.push({
          path: '/personal_info_detail',
          name: 'personal_info_detail',
          params: {
              userId: 1,
              userName: 'zhangsan'
          }
        })
      }else{
        this.$router.push({
          path: '/login',
          name: 'login'
        })
      }
    }
  },
  mounted:function(){
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="less" scoped>
  .My{
    background-color:#F7F7F7
  }
  .notlogin.persional_back{
    background-image:none;
    background-size:100% 100%;
  }
  .persional_back{
      overflow:hidden;
      background:url(../assets/iu.png) no-repeat center/cover;
      .setting{
        margin:8px;
        color:red;
      }
      .more{
        margin:8px!important;
      }
      .personal_info{
        margin:15px 0;
        padding-left:15px;
        text-align:center;
        :not(:first-child){
          margin:8px 0;
        }
        .img_head{
          width:100%;
          overflow:hidden;
          img{
            width:45px;
            height:45px;
            border-radius:50%;
          }
        }
      }
  }
  .info_records{
    background-color:#FFF;
    ul{
      display:flex;
      text-align:center;
      padding:8px 0;
      li{
        flex:1 0 auto;
        a{
          color:#000;
        }
        p{
          margin:5px 0;
        }
      }
    }
    
  }
  .otherinfo{
    margin-top:8px;
    background-color:#FFF;
    ul{
      li{
        padding:10px 0;
        a{
          color:#000;
        }
        border-bottom:1px solid #dedede;
        span:first-child{
          margin-right:10px;
          color:purple;
        }
        .pull_right{
          float:right;
        }
        .mint-switch{
          top:-8px;
        }
      }
    }
  }


</style>
